Day8-Android新手筆記-Calendar+Dialog+DatePicker+TimePicker(日期與時間選擇

2022 iThome 鐵人賽

DAY 8

Mobile Development

Android studio 30天新手筆記系列第 8 篇

14th鐵人賽

tsanyi0119

團隊nutc imac 老扛寶

2022-09-19 15:52:31

1772 瀏覽

分享至

許多地方都會使用到時間的選擇，例如最常見的台鐵e訂通、訂房App等。只要需要選擇時間，基本上都會用到這四個工具的組合。

Dialog有很多種型態，包含AlertDialog、ProgressDialog、DatePickerDialog、TimePickerDialog等，而本篇使用到DatePickerDialog、TimePickerDialog提供選擇視窗。

DatePickerDialog效果圖

TimePickerDialog效果圖

XML布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="200dp"
        android:text="Hello World!"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_Date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_marginTop="120dp"
        android:text="日期選擇"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/button_Time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="50dp"
        android:text="時間選擇"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/button_Date"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button_Date" />

</androidx.constraintlayout.widget.ConstraintLayout>

Java程式碼

public class MainActivity extends AppCompatActivity {
    
    //日期選擇監聽事件
    DatePickerDialog.OnDateSetListener datePickerListener;
    //時間選擇監聽事件
    TimePickerDialog.OnTimeSetListener timePickerListener;

    //日期選擇視窗
    DatePickerDialog datePickerDialog;
    //時間選擇視窗
    TimePickerDialog timePickerDialog;

    //用於存放時間資訊
    Calendar calendar;
    
    //格式化
    SimpleDateFormat sdfDate,sdfTime;

    TextView textView;
    Button buttonDate,buttonTime;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.textView);
        buttonDate = findViewById(R.id.button_Date);
        buttonTime = findViewById(R.id.button_Time);

        //日期格式 yyyyMMdd
        sdfDate = new SimpleDateFormat("yyyyMMdd",Locale.TAIWAN);

        //時間格式 hhMM
        sdfTime = new SimpleDateFormat("HH:mm",Locale.TAIWAN);

        //讓calendar抓取當前時間
        calendar = Calendar.getInstance();

//--------------------------------------------------------------------------------------------------------
        
        /** 日期選擇監聽 **/
        datePickerListener = new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker datePicker, int year, int month, int day) {
                calendar.set(Calendar.YEAR,year);
                calendar.set(Calendar.MONTH,month);
                calendar.set(Calendar.DAY_OF_MONTH,day);

                textView.setText(sdfDate.format(calendar.getTime()) +" "+ sdfTime.format(calendar.getTime()));
            }
        };

        /** 日期選擇視窗 **/
        datePickerDialog = new DatePickerDialog(MainActivity.this,
                datePickerListener,
                calendar.get(Calendar.YEAR),
                calendar.get(Calendar.MONTH),
                calendar.get(Calendar.DAY_OF_MONTH));
        
//--------------------------------------------------------------------------------------------------------

        /** 時間選擇監聽 **/
        timePickerListener = new TimePickerDialog.OnTimeSetListener() {
            @Override
            public void onTimeSet(TimePicker timePicker, int hour, int minute) {
                calendar.set(Calendar.HOUR_OF_DAY,hour);
                calendar.set(Calendar.MINUTE,minute);

                textView.setText(sdfDate.format(calendar.getTime()) +" "+ sdfTime.format(calendar.getTime()));

            }
        };

        /** 時間選擇視窗 **/
        timePickerDialog = new TimePickerDialog(MainActivity.this,
                timePickerListener,
                calendar.get(Calendar.HOUR_OF_DAY),
                calendar.get(Calendar.MINUTE),
                true);

//--------------------------------------------------------------------------------------------------------
        /** 按鈕點擊監聽 **/
        buttonDate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                datePickerDialog.show();
            }
        });
        
        /** 按鈕點擊監聽 **/
        buttonTime.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                timePickerDialog.show();
            }
        });

    }
}

接下來將解釋程式碼作用

        //日期格式 yyyyMMdd
        sdfDate = new SimpleDateFormat("yyyyMMdd",Locale.TAIWAN);

        //時間格式 hhMM
        sdfTime = new SimpleDateFormat("HH:mm",Locale.TAIWAN);

        //讓calendar抓取當前時間
        calendar = Calendar.getInstance();

透過SimpleDateFormat設定日期與時間的輸出格式，如yyyy-MM-dd、yyyyMMdd、HH:mm:ss等;Calendar可以透過其方法抓取目前系統的時間。

        /** 日期選擇監聽 **/
        datePickerListener = new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker datePicker, int year, int month, int day) {
                calendar.set(Calendar.YEAR,year);
                calendar.set(Calendar.MONTH,month);
                calendar.set(Calendar.DAY_OF_MONTH,day);

                textView.setText(sdfDate.format(calendar.getTime()) +" "+ sdfTime.format(calendar.getTime()));
            }
        };

        /** 日期選擇視窗 **/
        datePickerDialog = new DatePickerDialog(MainActivity.this,
                datePickerListener,
                calendar.get(Calendar.YEAR),
                calendar.get(Calendar.MONTH),
                calendar.get(Calendar.DAY_OF_MONTH));

這邊是日期選擇視窗及日期監聽事件，要特別注意Code擺放的位置要避免選擇視窗出現時，監聽事件卻沒有初始化的問題。透過DatePickerDialog顯示日期選擇視窗，使用Calendar的get()方法將系統日期放入DatePickerDialog的建構元中，提供DatePickerDialog預設選擇的日期，日期選擇後使用DatePickerDialog.OnDateSetListener()方法將日期回傳，此方法會回傳三個值，分別為年、月、日。接下來利用Calendar的set()方法，將日期資訊儲存到Calendar裡。最後利用SimpleDateFormat將資料轉換格式後給TextView顯示。

        /** 時間選擇監聽 **/
        timePickerListener = new TimePickerDialog.OnTimeSetListener() {
            @Override
            public void onTimeSet(TimePicker timePicker, int hour, int minute) {
                calendar.set(Calendar.HOUR_OF_DAY,hour);
                calendar.set(Calendar.MINUTE,minute);

                textView.setText(sdfDate.format(calendar.getTime()) +" "+ sdfTime.format(calendar.getTime()));

            }
        };

        /** 時間選擇視窗 **/
        timePickerDialog = new TimePickerDialog(MainActivity.this,
                timePickerListener,
                calendar.get(Calendar.HOUR_OF_DAY),
                calendar.get(Calendar.MINUTE),
                true);

這邊的內容與上方介紹的雷同，但負責的週期不同，這邊負責日內時間的選擇。時間選擇視窗及時間監聽事件，一樣得注意Code擺放的位置；Calender get()與set()方法需要特別注意單位的部分別將日期與時間搞混。

        button_Date.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                datePickerDialog.show();
            }
        });

        button_Time.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                timePickerDialog.show();
            }
        });

這邊使用DatePickerDialog與TimePickerDialog自帶的show()方法，將選擇視窗顯示出來。

最後上執行結果圖：